<template>
    <div class="data-chart-container">
        <div class="my-chart" :id="chartData.id"></div>
    </div>
</template>

<script>
    export default {
        name: 'index',
        props: ['chartData'],
        data () {
            return {
                // 数据
                series: [],
                // 图例
                legend: [],
                // x轴
                xAxis: [],
                // 折线图y轴
                yAxis: [{
                    type: 'value',
                    nameTextStyle: {
                        color: '#35373B'
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: ['#979797']
                        }
                    },
                    axisLabel: {
                        margin: 2,
                        formatter: function (value, index) {
                            if (value >= 10000) {
                                value = value / 10000 + '万'
                            }
                            return value
                        }
                    }
                }],
                // 安全人数百分比和人
                rate: [],
                // 饼图单位
                unit: '元'
            }
        },
        watch: {
            chartData () {
                if (this.chartData.type === 'pie') {
                    this.initPieData()
                    this.initPieEchart()
                } else {
                    this.initLineData()
                    this.initLineEchart()
                }
            }
        },
        created () {
            if (this.chartData.type === 'pie') {
                this.initPieData()
            } else {
                this.initLineData()
            }
        },
        mounted () {
            if (this.chartData.type === 'pie') {
                this.initPieEchart()
            } else {
                this.initLineEchart()
            }
            window.onresize = () => {
                this.resizeEchart()
            }
        },
        methods: {
            /**
             * 图表宽度自适应
             */
            resizeEchart () {
                this.$echarts.init(document.getElementById(this.chartData.id)).resize()
            },
            /**
             * 初始化折线图数据
             */
            initLineData () {
                this.legend = []
                this.series = []
                this.chartData.series.forEach(item => {
                    let set = {
                        name: item.name,
                        type: 'line',
                        lineStyle: {
                            width: 1
                        },
                        data: item.data
                    }
                    if (this.chartData.rightData && this.chartData.rightData.includes(item.name)) {
                        set.yAxisIndex = 1
                    }
                    this.series.push(set)
                    this.legend.push(item.name)
                })
                if (this.chartData.rightData) {
                    this.yAxis.push({...this.yAxis[0], splitLine: {show: false}})
                }
                if (this.chartData.yAxisName) {
                    this.rate = this.chartData.rate
                    this.yAxis[0] = {
                        ...this.yAxis[0],
                        name: this.chartData.yAxisName[0] === '(人)' ? '(人)' : '(元)',
                        nameLocation: 'start',
                        nameGap: 10
                    }
                }
                this.xAxis = []
                this.chartData.xAxis.forEach(item => {
                    if (typeof item === 'number') {
                        this.xAxis.push(item + '月')
                    } else {
                        this.xAxis.push(item)
                    }
                })
            },
            /**
             * 初始化饼图数据
             */
            initPieData () {
                this.legend = []
                this.series = []
                this.chartData.series.forEach(item => {
                    this.legend.push(item.name)
                })
                this.unit = this.chartData.unit ? this.chartData.unit : '元'
                this.series = this.chartData.series
            },
            /**
             * 绘制折线图
             */
            initLineEchart () {
                let myChart = this.$echarts.init(document.getElementById(this.chartData.id))
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        formatter: (params) => {
                            let html = ''
                            html += params[0].name + '<br/>'
                            params.forEach(item => {
                                if (this.yAxis[0].name === '(人)') {
                                    html += item.marker + item.seriesName + ': ' + item.data + '&emsp;' + this.getNameData(item.seriesName, item.dataIndex) + '<br/>'
                                } else {
                                    html += item.marker + item.seriesName + ': ' + item.data + '<br/>'
                                }
                            })
                            return html
                        }
                    },
                    legend: {
                        icon: 'circle',
                        data: this.legend,
                        x: 'center',
                        y: 'bottom',
                        padding: [0, 0, 0, 0]
                    },
                    grid: {
                        top: '4%',
                        bottom: '15%',
                        left: '10%',
                        right: '10%'
                    },
                    xAxis: {
                        data: this.xAxis,
                        nameTextStyle: {
                            color: '#35373B'
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        }
                    },
                    yAxis: this.yAxis,
                    series: this.series,
                    color: ['#1F96F3', '#F09510', '#12B54D', '#F34422']
                }
                myChart.setOption(option)
            },
            /**
             * 绘制饼图
             */
            initPieEchart () {
                if (this.chartData.height) {
                    document.getElementById(this.chartData.id).style.height = this.chartData.height
                }
                let myChart = this.$echarts.init(document.getElementById(this.chartData.id))
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                        icon: 'circle',
                        bottom: 10,
                        left: 'center',
                        data: this.legend
                    },
                    series: {
                        type: 'pie',
                        radius: [0, '60%'],
                        center: ['50%', '45%'],
                        label: {
                            formatter: `{c}${this.unit}  {d}%\n  {b|{b}}`,
                            rich: {
                                a: {
                                    color: '#999',
                                    lineHeight: 22,
                                    align: 'center'
                                },
                                b: {
                                    fontSize: 12,
                                    lineHeight: 18,
                                    align: 'center',
                                    color: '#333'
                                }
                            }
                        },
                        data: this.series
                    },
                    color: ['#1F96F3', '#FFC037', '#FF8100', '#C461C4', '#27D1C5', '#93A5B3']
                }
                myChart.setOption(option)
            },
            /**
             * 根据名称和索引获取数据
             * @param name 数据名称
             * @param index 索引
             */
            getNameData (name, index) {
                let res = this.rate.filter(item => item.name === name)
                return ((res[0].data[index]) * 100).toFixed(2) + '%'
            }
        },
        beforeDestroy () {
            window.onresize = null
        }
    }
</script>

<style scoped lang="scss">
    .my-chart {
        width: 100%;
        height: 304px;
    }
</style>
